<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="./js/earthsdk.js"></script>
    <!-- 面板的样式放到css文件内 -->
    <link rel="stylesheet" href="./css/example1.css" />
    <title>高程</title>
    <style>
      html,
      body,
      #app {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      #box {
        display: grid;
        grid-template-columns: 90px 1fr;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <div id="panel">
      <div id="box">
        <label for="">高程</label>
        <input type="checkbox" id="elevation" onchange="changeElevation()" checked/>
      </div>
    </div>
    <script>
      /** ---------------------------------地球创建------------------------------------**/

      // Vue中引入方式：import { ESObjectsManager } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';

      const { ESObjectsManager } = XE2["esobjs-xe2-plugin-main"];
      const objm = new ESObjectsManager();
      window.g_objm = objm;

      // 创建Cesium视口
      const viewer = objm.createCesiumViewer({
        domid: document.getElementById("app"),
      });

      // 监听视口状态
      viewer.statusChanged.don((status) => {
        if (status == "Created") {
          // 视口创建完成，飞到初始视角位置
          objm.activeViewer.flyIn(
            [115.13608053611286, 28.821215137027473, 4461.014865370932],
            [309.07544316940016, -33.72351135063601, 0.00009594434830598995],
            3
          );
        }
      });

      // 通过json创建一个影像图层
      const imageryLayer = objm.createSceneObjectFromJson({
        id: "9812a65f-0de0-4f7b-b234-809c0c2fb8ef",
        type: "ESImageryLayer",
        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
      });

      /**-------------------------------------cesium地形-------------------------------**/
      /**
       * 1.cesium官方地形需要到官网申请token
       * 2.将token设置给当前视口下的ionAccessToken
       */
      const { ESTerrainLayer } = XE2["esobjs-xe2-plugin-main"];
      const eSTerrainLayer = objm.createSceneObject(ESTerrainLayer);
      // cesium官方地形
      eSTerrainLayer.url = "ion://1";

      //token需要到cesium官网申请 https://ion.cesium.com/
      objm.activeViewer.ionAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlMGJlNTYyMS05YzIzLTQ5NmYtOTA4My1hYzYwMTlkMjVmZTEiLCJpZCI6MTk3ODAxLCJpYXQiOjE3MDg5MDg3NTF9.TIhdHyy6gBeHCLRHfsw7klG5ObX-OpD6e0VfqiH6AWE";

      /** --------------------------------- 全球材质，地形着色 ------------------------------------**/
      const { CzmGlobeMaterial } = XE2["xe2-cesium-objects"];
      const sceneObject = objm.createSceneObject(CzmGlobeMaterial);

      // 设置高程
      const changeElevation = () => {
        sceneObject.shadingMode = document.getElementById("elevation").checked
          ? "elevation"
          : "none";
      };
      changeElevation();
    </script>
  </body>
</html>
